<template>
	<view>
		<u-navbar title="选择校区" :border-bottom="false" title-bold>
			<view slot="right">
				<text class="mr-30" @tap="addAddress()">新增收货地址</text>
			</view>
		</u-navbar>
		<view class="flex items-center mx-30">
			<view class="flex items-center mr-12">
				<u-icon name="map"></u-icon>
				<text class="mx-8">当前校区</text>
				<u-icon size="24" name="arrow-downward"></u-icon>
			</view>
			<u-search placeholder="请输入校区" v-model="keyword" :show-action="false"></u-search>
		</view>
		<view class="mx-30 mt-50">
			{{ schoolInfo.name }}
		</view>
		<view class="line my-32" />
		<view class="mx-30">
			<view class="title zm-mb-32">
				<u-icon name="tags"></u-icon>
				<text class="ml-8">校区列表</text>
			</view>
			<view class="mx-30 pt-24">
				<!-- 				{{ schoolList }} -->
				<view class="py-12" v-for="(item, index) in schoolList" :key="index" @click="selectSchool(item)">
					<view class="font-bold font-30 line-1">
						<!-- <u-tag class="mr-8" v-if="index == 0" text="默认" size="mini" type="warning" /> -->
						<text>{{ item.name }}</text>
					</view>
					<view class="font-24 nameAndTel mt-6">
						<!-- <text>{{ item.name }}</text> -->
						<text class="ml-32">{{ item.address }}</text>
					</view>
					<view class="line mt-12" />
				</view>
			</view>
		</view>
		<view class="mx-30">
			<view class="title zm-mb-32">
				<u-icon name="tags"></u-icon>
				<text class="ml-8">配送地址列表</text>
			</view>
			<view class="mx-30 pt-24">
				<view class="py-12" v-for="(item, index) in addressList" :key="index" @click="selectAddress(item)">
					<view class="font-bold font-30 line-1">
						<!-- <u-tag class="mr-8" v-if="index == 0" text="默认" size="mini" type="warning" /> -->
						<text>{{ item.comSchool.name }}</text>
					</view>
					<view class="font-bold font-30 line-1">
						<!-- <u-tag class="mr-8" v-if="index == 0" text="默认" size="mini" type="warning" /> -->
						<text> {{ item.comSchoolBuilding.name }} — {{ item.address }}</text>
					</view>
					<view class="font-24 nameAndTel mt-6">
						<!-- <text>{{ item.name }}</text> -->
						<text class="ml-32">{{ item.contacts }}</text>
					</view>
					<view class="font-24 nameAndTel mt-6">
						<!-- <text>{{ item.name }}</text> -->
						<text class="ml-32">{{ item.phone }}</text>
					</view>
					<view class="line mt-12" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				keyword: '',
				schoolList: [], //学校列表
				addressList:[], //地址列表
			}
		},
		onShow() {
			this.schoolInfo = uni.getStorageSync('schoolInfo');
			// 此处如果新增地址之后需要重新请求接口是，所以将事件请求放在onshow中处理
			this.getSchool();
			this.getAddress();
		},
		// #ifndef MP
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.navTo('/pages/set/set');
			} else if (index === 1) {
				// #ifdef APP-PLUS
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.hideTitleNViewButtonRedDot({
					index
				});
				// #endif
				uni.navigateTo({
					url: '/pages/notice/notice'
				})
			}
		},
		// #endif
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			selectAddress(item){
				
			},
			// 选择配送地址
			selectSchool(item) {
				// this.$u.toast(`我选择了第${item}个地址`)
				console.log(item);
				this.$u.api.getUserAddress({
					userId: this.userInfo.id,
					schoolId: item.id,
				}).then(res => {
					this.addressList = res.dataList;
				})
			},
			getAddress(){
				this.$u.api.getUserAddress({
					userId: this.userInfo.id,
				}).then(res => {
					this.addressList = res.dataList;
				})
			},
			getSchool() {
				this.$u.api.getComSchool({}).then(res => {
					this.schoolList = res.dataList;
				})
			},
			addAddress() {
				this.$ut.route('pages/address/addressManage', {
					type: 'add'
				});
			}
		}
	}
</script>

<style lang="scss">
	.nameAndTel {
		color: #999;
	}

	::v-deep {
		.u-mode-light-warning {
			border: none;
		}
	}
</style>
